<template>
    <div>
      <div class="mapClass" id="container" :style="{width: width+'%', height: height+ 'px'}" @click="handleClick"></div>
      <!-- <div id="panel"></div> -->
    </div>
</template>
<script>
let map = null
let marker=null

export default {
  name:'map-address',
  props: {
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 600,
    },
    LngLat:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  data(){
    return{
      oldMark:null,
    }
  },
  mounted() {
    map = new AMap.Map('container', {});
    
  },
  destroyed() {
    map && map.destroy()
  },
  watch:{
    LngLat:{
      deep:true,
      handler:function(newV,oldV){
        if(oldV&&marker){
          map.remove(marker);
        }
        // 创建一个 Marker 实例：
        marker = new AMap.Marker({
          position: new AMap.LngLat(newV[0], newV[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        });

        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
        let start=[Number(newV[0])-0.01, Number(newV[1])-0.01]
        let end=[Number(newV[0])+0.01,Number(newV[1])+0.01]
        var mybounds = new AMap.Bounds(start, end);
        map.setBounds(mybounds);
        // map.setFitView()
      }
    }
  },
  methods: {
    handleClick() {
      map.on('click', this.showInfoClick);
    },
    showInfoClick(e){
      this.$emit('click-event',[e.lnglat.getLng(),e.lnglat.getLat()])
    }
  }
}
</script>
<style scoped>
  #container {
    width: 100%;
    height: 100vh;
  }
</style>
